<div class="middle">
  <div class="middle-header">
    <div class="container-fluid">
      <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
      <alerts alerts="alerts"></alerts>
      <div ng-if="!loaded" class="mar-top-xl">Loading...</div>
      <div ng-if="route">
        <h1 class="contains-actions">
          <div class="pull-right dropdown" ng-hide="!('routes' | canIDoAny)">
            <button type="button" class="dropdown-toggle btn btn-default actions-dropdown-btn hidden-xs" data-toggle="dropdown">
              Actions
              <span class="caret" aria-hidden="true"></span>
            </button>
            <a href=""
               class="dropdown-toggle actions-dropdown-kebab visible-xs-inline"
               data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
            <ul class="dropdown-menu dropdown-menu-right actions action-button">
              <li ng-if="routesVersion | canI : 'update'">
                <a ng-href="{{route | editResourceURL}}" role="button">Edit</a>
              </li>
              <li ng-if="routesVersion | canI : 'update'">
                <a ng-href="{{route | editYamlURL}}" role="button">Edit YAML</a>
              </li>
              <li ng-if="routesVersion | canI : 'delete'">
                <delete-link
                  kind="Route"
                  resource-name="{{route.metadata.name}}"
                  project-name="{{route.metadata.namespace}}"
                  alerts="alerts">
                </delete-link>
              </li>
            </ul>
          </div>
          {{route.metadata.name}}
          <route-warnings ng-if="route.spec.to.kind !== 'Service' || services"
                          route="route"
                          services="services">
          </route-warnings>
          <small class="meta">created <span am-time-ago="route.metadata.creationTimestamp"></span></small>
        </h1>
        <labels labels="route.metadata.labels" clickable="true" kind="routes" project-name="{{route.metadata.namespace}}" limit="3"></labels>
      </div>
    </div>
  </div><!-- /middle-header-->
  <div class="middle-content">
    <div class="container-fluid">
      <div class="row" ng-if="route">
        <div class="col-sm-12">
          <div class="resource-details">
            <div ng-if="!route.status.ingress" class="route-status">
              <span class="h3">
                {{route | routeLabel : null : true}}
              </span>
              <div class="meta">
                <status-icon status="'Pending'"></status-icon>
                The route is not accepting traffic yet because it has not been admitted by a router.
              </div>
            </div>
            <div ng-repeat="ingress in route.status.ingress" ng-init="admittedCondition = (ingress | routeIngressCondition : 'Admitted')" class="route-status">
              <div class="h3">
                <span ng-if="(route | isWebRoute)">
                  <a ng-href="{{route | routeWebURL : ingress.host}}" target="_blank">
                    {{route | routeLabel : ingress.host : true}}
                    <i class="fa fa-external-link" aria-hidden="true"></i>
                  </a>
                </span>
                <span ng-if="!(route | isWebRoute)">
                  {{route | routeLabel : ingress.host}}
                </span>
              </div>
              <div class="meta">
                <span ng-if="!admittedCondition">Admission status unknown for router '{{ingress.routerName}}'</span>
                <span ng-if="admittedCondition.status === 'True'">
                  <status-icon status="'Succeeded'"></status-icon>
                  Exposed on router '{{ingress.routerName}}' <span am-time-ago="admittedCondition.lastTransitionTime"></span>
                </span>
                <span ng-if="admittedCondition.status === 'False'">
                  <status-icon status="'Error'"></status-icon>
                  Rejected by router '{{ingress.routerName}}' <span am-time-ago="admittedCondition.lastTransitionTime"></span>
                </span>
              </div>
              <div ng-if="showRouterHostnameAlert(ingress, admittedCondition)" class="mar-top-lg">
                <div class="alert alert-info">
                  <span class="pficon pficon-info" aria-hidden="true"></span>
                  The DNS admin should set up a CNAME from the route's hostname, {{ingress.host}},
                  to the router's canonical hostname, {{ingress.routerCanonicalHostname}}.
                </div>
              </div>
            </div>

            <h4 class="mar-top-xl">Details</h4>
            <dl class="dl-horizontal left">
              <dt ng-if-start="route.spec.wildcardPolicy && route.spec.wildcardPolicy !== 'None' && route.spec.wildcardPolicy !== 'Subdomain'">Wildcard Policy:</dt>
              <dd ng-if-end>{{route.spec.wildcardPolicy}}</dd>
              <dt>Path:</dt>
              <dd>
                <span ng-if="route.spec.path">{{route.spec.path}}</span>
                <span ng-if="!route.spec.path"><em>none</em></span>
              </dd>
              <dt>{{route.spec.to.kind || "Routes To"}}:</dt>
              <dd>
                <a ng-href="{{route.spec.to.name | navigateResourceURL : route.spec.to.kind : route.metadata.namespace}}">{{route.spec.to.name}}</a>
              </dd>
              <dt>Target Port:</dt>
              <dd>
                <span ng-if="route.spec.port.targetPort">
                  {{route.spec.port.targetPort}}
                </span>
                <span ng-if="!route.spec.port.targetPort"><em>any</em></span>
              </dd>
              <div ng-if="route.spec.port.targetPort && route.spec.to.kind === 'Service' && (route | routeTargetPortMapping : services[route.spec.to.name])" class="help-block">
                This target port will route to {{route | routeTargetPortMapping : services[route.spec.to.name]}}.
              </div>
            </dl>
            <div ng-if="route.spec.alternateBackends.length" class="row">
              <div class="col-sm-12 mar-bottom-lg">
                <h4>Traffic</h4>
                <div class="help-block">
                  This route splits traffic across multiple services.
                </div>
              </div>
              <div class="col-sm-12 col-md-5 col-md-push-7 mar-bottom-lg">
                <route-service-pie route="route"></route-service-pie>
              </div>
              <div class="cold-sm-12 col-md-7 col-md-pull-5">
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th>Service</th>
                      <th>Weight</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <a ng-href="{{route.spec.to.name | navigateResourceURL : route.spec.to.kind : route.metadata.namespace}}">{{route.spec.to.name}}</a>
                      </td>
                      <td>
                        {{route.spec.to.weight}}
                      </td>
                    </tr>
                    <tr ng-repeat="alternate in route.spec.alternateBackends">
                      <td>
                        <a ng-href="{{alternate.name | navigateResourceURL : alternate.kind : route.metadata.namespace}}">{{alternate.name}}</a>
                      </td>
                      <td>
                        {{alternate.weight}}
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div style="margin-bottom: 10px;">
              <h4>TLS Settings</h4>
              <dl class="dl-horizontal left" ng-if="route.spec.tls">
                <dt>Termination Type:</dt>
                <dd>{{route.spec.tls.termination | humanizeTLSTermination}}</dd>
                <dt>Insecure Traffic:</dt>
                <dd>{{route.spec.tls.insecureEdgeTerminationPolicy || 'None'}}</dd>
                <dt>Certificate:</dt>
                <dd>
                  <span ng-show="route.spec.tls.certificate && !reveal.certificate">
                    <a href="" ng-click="reveal.certificate = true">Show</a>
                  </span>
                  <span ng-if="!route.spec.tls.certificate"><em>none</em></span>
                </dd>
                <div ng-if="reveal.certificate">
                  <pre class="clipped">{{route.spec.tls.certificate}}</pre>
                </div>
                <dt>Key:</dt>
                <dd>
                  <span ng-if="route.spec.tls.key && !reveal.key">
                    <a href="" ng-click="reveal.key = true">Show</a>
                  </span>
                  <span ng-if="!route.spec.tls.key"><em>none</em></span>
                </dd>
                <div ng-if="reveal.key">
                  <pre class="clipped">{{route.spec.tls.key}}</pre>
                </div>
                <dt>CA Certificate:</dt>
                <dd>
                  <span ng-show="route.spec.tls.caCertificate && !reveal.caCertificate">
                    <a href="" ng-click="reveal.caCertificate = true">Show</a>
                  </span>
                  <span ng-if="!route.spec.tls.caCertificate"><em>none</em></span>
                </dd>
                <div ng-if="reveal.caCertificate">
                  <pre class="clipped">{{route.spec.tls.caCertificate}}</pre>
                </div>
                <dt>Destination CA Cert:</dt>
                <dd>
                  <span ng-show="route.spec.tls.destinationCACertificate && !reveal.destinationCACertificate">
                    <a href="" ng-click="reveal.destinationCACertificate = true">Show</a>
                  </span>
                  <span ng-if="!route.spec.tls.destinationCACertificate"><em>none</em></span>
                </dd>
                <div ng-if="reveal.destinationCACertificate">
                  <pre class="clipped">{{route.spec.tls.destinationCACertificate}}</pre>
                </div>
              </dl>
              <p ng-if="!route.spec.tls">
                TLS is not enabled.
                <span ng-if="routesVersion | canI : 'update'">
                  <a ng-href="{{route | editResourceURL}}" role="button">Edit</a> this route to enable secure network traffic.
                </span>
              </p>
            </div>
            <annotations annotations="route.metadata.annotations"></annotations>
          </div>
        </div><!-- /col-* -->
      </div>
    </div>
  </div><!-- /middle-content -->
</div>
